<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>通过属性读取css样式</title>
    <style>
        .box1{
            width: 200px;
            height: 200px;
            background-color: #bfa;
            margin: 50px;
            padding: 50px;
            border:10px  red solid;
            text-align: center;
            font-size: 20px;
            overflow: auto;
            position: relative;
        }
        .box2{
            width: 100px;
            height: 500px;
            margin: 0 auto;
            background-color: deepskyblue;

        }
    </style>
    <script>
        document.addEventListener("DOMContentLoaded",function(){
            const btn =document.getElementsByClassName("btn")[0]
            const box1 =document.getElementsByClassName("box1")[0]
            const box2 =document.getElementsByClassName("box2")[0]

            btn.addEventListener("click",function(){
            /* 
                只读的方法
                1.元素.clientHeight     获取元素的(内容区+内边距)的宽度
                2.元素.clientWidth      获取元素的(内容区+内边距)的高度

                3.元素.offsetHeight     获取的是元素可见框的高度  
                4.元素.offsetWidth      获取的是元素可见框的宽度 

                5.元素.scrollHeight     获取的是元素滚动区域的大小
                6.元素.scrollWidth

                7.元素.offsetParent     获取元素的定位父元素
                                        定位父元素：离当前元素开启了定位的祖先元素，如果所有的元素都没开启定位，则返回body

                8.元素.offsetTop        获取元素相对于定位元素的偏移量
                9.元素.offsetBotoom

                10.元素.scrollTop       获取元素滚动条的偏移量
                元素.scrollLeft
            */
                // 获取的是内容区+内边距
                console.log(box1.clientWidth)       // 300
                console.log(box1.clientHeight)      // 300

                // 获取的是内容区的宽度
                console.log(getComputedStyle(box1).width)   // "200px"

                // 获取的是元素可见框的大小（内容区+内边距+边框）
                console.log(box1.offsetHeight)      // 320
                console.log(box1.offsetWidth)       // 320

                // 获取的是元素滚动区域的大小
                console.log(box1.scrollHeight)      // 600
                console.log(box1.scrollWidth)      //283=内容区+内边距-滚动条的宽度（谷歌一般为17px）

                // 获取元素相对于定位元素的偏移量
                console.log(box2.offsetTop)
                console.log(box2.offsetLeft)

                // 获取元素滚动条的偏移量
                console.log(box1.scrollTop)     // 这个是可以修改的
            })
        })
    </script>
</head>
<body>
    <button class="btn">点我一下</button>
    <hr>
    <div class="box1">
        <div class="box2"></div>
    </div>
</body>
</html>